<template>
	<div class="page">
		<global-header title="开奖结果" @back="$router.back()" />
		<div class="row-between-center bg-white py-[3px] h-[41.5px]">
			<ActionSelect ref="gamesActionSelect" v-model:val="activeGameIndex" title="全部游戏" :columns="gamesActions" />
			<div class="text-[#E4E4E4]">|</div>
			<div class="w-[50%] flex items-center justify-center" @click="date.show = true">
				<span class="mr-[6px] text-[12px]">{{ moment(form.date).format("YYYY-MM-DD") }}</span>
				<svg-icon name="icon-date" width="16px" height="16px"></svg-icon>
			</div>
		</div>
		<div class="h-[10px]"></div>
		<div class="px-[15.5px] bg-[#FFFFFF] text-[#888888]">
			<div class="py-[10px] flex items-center gap-[13px] border-b-[1px] border-[#E4E4E4] border-solid">
				<span class="w-[100px] text-center">期数/时间</span>
				<div class=" flex-1 row justify-around">
					<span class=" text-center px-[10px] py-[5px] bg-[#ecf4ff] rounded-sm">号码</span>
					<span class=" text-center px-[10px] py-[5px] bg-[#ecf4ff] rounded-sm">大小</span>
					<span class=" text-center px-[10px] py-[5px] bg-[#ecf4ff] rounded-sm">单双</span>
					<span class=" text-center px-[10px] py-[5px] bg-[#ecf4ff] rounded-sm">总和/形态</span>
				</div>

			</div>
		</div>
		<main class="page-main px-[15.5px] bg-[#FFFFFF] text-[#888888]">
			<div v-for="(row, index) of list" :key="index"
				class="py-[10px] flex items-center gap-[13px] border-b-[1px] border-[#E4E4E4] border-solid ">
				<span class="w-[100px] col items-center">
					<span>{{ row.BitchNo }}</span>
					<span>
						{{ moment(row.CreatedAt).format("HH:mm") }}
					</span>
				</span>
				<span class=" flex-1">
					<div class="w-full flex items-center justify-around">
						<template v-if="row.CategoryId == GameCategory.sc">
							<scBall class="!mr-[4px]" :num="item" v-for="item in getlotteryCode(row)"></scBall>
						</template>
						<template v-if="row.CategoryId == GameCategory.ssc">
							<sscBall class="!mr-[4px]" :num="item" v-for="item in getlotteryCode(row)"></sscBall>
						</template>
						<template v-if="row.CategoryId == GameCategory.pcdd">
							<pcddBall class="!mr-[4px]" :num="getlotteryCode(row)[0]"></pcddBall>
							<pcddBall class="!mr-[4px]" :num="getlotteryCode(row)[1]"></pcddBall>
							<pcddBall class="!mr-[4px]" :num="getlotteryCode(row)[2]"></pcddBall>
							<span class="!mr-[4px]">+</span>
							<pcddBall class="!mr-[4px]" :num="pcddSumLH(getlotteryCode(row)).sum"></pcddBall>
						</template>
						<template v-if="row.CategoryId == GameCategory.lhc">
							<lhcBall class="!mr-[4px]" :num="item" v-for="item in getlotteryCode(row)"></lhcBall>
						</template>
					</div>
				</span>
				<!-- <span class="w-[28px] text-center">大小</span>
				<span class="w-[28px] text-center">单双</span>
				<span class="w-[calc(28px * 2 + 13px)]  text-center">总和/形态</span> -->
			</div>
		</main>

		<van-calendar ref="calendarRef" :max-date="date.maxDate" :min-date="date.minDate" v-model:show="date.show"
			:default-date="date.defaultDate" type="single" @confirm="dateOnConfirm">
			<template #footer>
				<div class="grid grid-cols-2 gap-x-[10px] py-[10px]">
					<van-button size="small" round block @click="dateOnCancel">取消</van-button>
					<van-button size="small" type="primary" round block @click="dateOnConfirm">
						确定
					</van-button>
				</div>
			</template>
		</van-calendar>
	</div>
</template>
<route>
  {
    name: "admin-openresult",
    meta: {
      pageIndex: 3,
    }
  }
</route>
<script setup lang="ts">
import { useGameStore } from "@/store/modules/game";
import { cloneDeep } from "lodash-es";
import moment from "moment";
import { storeToRefs } from "pinia";
import { reqGameHisrory } from "@/api/main";
import { useList } from "@/hooks/useList";
import { GameCategory } from "@/enums";
import { pcddSumLH, scSumLH, sscSumLH, lhcSumLH } from "@/utils/game";

interface Params {
	Issue?: string;
	StartDate?: string;
	EndDate?: string;
	LotteryId?: number;
}

// 获取号码
const getlotteryCode = (item: HistoryMo) => {
	return item.LuckCode.split(",").map(num => Number(num));
};

const calendarRef = ref();
const date = ref({
	show: false,
	defaultDate: new Date(),
	maxDate: moment().add(1, "days").toDate(),
	minDate: computed(() => moment().subtract(1, "years").toDate())
});
const dateOnConfirm = () => {
	if (calendarRef.value) {
		const values = calendarRef.value?.getSelectedDate();
		form.date = values;
	}
	date.value.show = false;
	getData();
};
const dateOnCancel = () => {
	date.value.show = false;
};

const form = reactive({
	issue: "",
	lottery_id: "-1",
	date: new Date()
});

const route = useRoute();
const activeGameIndex = ref(0);
const gameStore = useGameStore();
const { gameTotal } = storeToRefs(gameStore);
const games = computed(() => {
	let list = cloneDeep(gameTotal.value);
	list.sort((a, b) => a.LotterySort - b.LotterySort);
	return list;
});
const gamesActions = computed(() => {
	return games.value.map((v, i) => ({ text: v.Name, value: i }));
});
const currentData = computed(() => {
	return games.value[activeGameIndex.value];
});

const getParams = () => {
	const params: Params = {};
	if (form.date) {
		params.StartDate = moment(form.date).format("YYYY-MM-DD 00:00:00");
		params.EndDate = moment(form.date).format("YYYY-MM-DD 23:59:59");
	}
	if (form.issue) {
		params.Issue = form.issue;
	}
	if (currentData.value) {
		params.LotteryId = currentData.value?.LotteryId;
	}
	return params;
};
const { state, list, getData, search } = useList<HistoryMo, Params>(reqGameHisrory, getParams);

watch(
	() => activeGameIndex.value,
	() => {
		nextTick(() => {
			state.page = 1;
			state.pageSize = 15;
			getData();
		});
	}
);

onBeforeMount(() => {
	if (route.query.gameId) {
		const index = games.value.findIndex(item => item.LotteryId == Number(route.query.gameId));
		activeGameIndex.value = index == -1 ? 0 : Number(index);
	}
});

onMounted(() => {
	getData();
});
</script>
